<template>
  <div class="ct-detail" v-if="detailsList.length != 0">
    <div class="detail-item" v-for="(item,index) in detailsList" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt />
        <p>{{item.title}}</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "category-detail",
  props: ["detailsList"],
  mounted() {}
};
</script>

<style scoped>
.ct-detail {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.detail-item {
  width: 33.3%;
}
.detail-item a {
  display: block;
  text-align: center;
}
.detail-item img {
  width: 75%;
}
</style>